xpk.DHTMLArea = function(elements, options){
	var _body = $(document);
	var $this;
	
	var _this = {
		options: {
			className: 'dhtml-menu',
			activeClass: 'dhtml-menu-active',
			zIndex: 1000,
			opacity: 0.9,
			width: 200,
			delay: 250,
			position: 'right' // top | left | bottom | right | mouse
		},
		setOptions: function(options){
			$.extend(this.options, options || {});
		},			 
		init: function(){
			this.setOptions(options);
			$this = this.$this = $(this);
			
			var tipHTML = 	'<div class="hint-body" id="tip-body">\
					<div class="hint-content"></div>\
					</div><div class="hint-corner"></div>';
			
			this.menu = $('<div></div>', {
					 	className: this.options.className
					}).css({
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'visibility': 'hidden',
					'zIndex': this.options.zIndex
				}).appendTo(document.body);
			
			this.build(elements);
			if(this.options.init) this.options.init.call(this);	
			return this;
		},
		
		build: function(elements){
			
			if(!elements || !elements.length) {
				return this;
			};

			if(this.options.delegate) {
				elements.delegate(this.options.fromSelector, 'click', function(event){
					var $element = $(this);
					_this.show($element, event);
					return false;
				});
			} else {
				elements.bind('click', function(event){
					var $element = $(this);
					_this.show($element, event);
					return false;
				});
			};
			
			_body.click(function(){
				_this.hide();
			});

			this.offset = {
				left: parseInt(this.menu.css('paddingLeft')) || 0 + parseInt(this.menu.css('marginLeft')) || 0 + parseInt(this.menu.css('borderLeftWidth')) || 0,
				top: parseInt(this.menu.css('paddingTop')) || 0 + parseInt(this.menu.css('marginTop')) || 0 + parseInt(this.menu.css('borderTopWidth')) || 0
			};
			
			if(this.options.onshow) {
				$this.bind('onshow',this.options.onshow )
			};
			if(this.options.onhide) {
				$this.bind('onhide',this.options.onhide )
			};			
		},


		show: function($element, event){
			if(this.activeElement == $element[0]) {
				return this.hide();
			} else {
				this.hide(true);
			};
			var _css = $element.offset();
			var paddingLeft = $element.outerWidth();

			_css.paddingLeft = paddingLeft * 1.5

			$.extend(_css, {
				 visibility:'visible',
				 opacity: 0
			});
			if(!this.activeElement){
				delete _css.opacity;
			};
			this.activeElement = $element[0];
			this.$activeElement = $element;
			this.menu.css(_css).stop().fadeTo(200, 1);
			this.$activeElement.addClass(this.options.activeClass);
			
			if(this.options.onshow){
				$this.trigger('onshow', this);
			}
		},
		hide: function(quick){
			if(!this.activeElement) {
				return false;
			};
			
			if(!quick) {
				_this.menu.css({
					'visibility': 'hidden',
					'top': '0'
				});
			};
			
			this.$activeElement.removeClass(this.options.activeClass)
			this.activeElement = this.$activeElement = null;
			if(this.options.onhide) {
				$this.trigger('onhide', this);
			};
		},
		getElementPosition: function($element){
			var element = $element[0];
			var position = $element.offset()
			var offset = {
				left: 0,
				top: 0
			};
			if($element.is('area') && element.shape == 'rect'){
				var coords = element.coords.split(',');
				offset.left = parseInt(coords[0]);
				offset.top = parseInt(coords[1]);
				offset.width = parseInt(coords[2] - coords[0]);
				offset.height = parseInt(coords[3] - coords[1]);
			};
			var obj = {
				'width': offset.width || element.offsetWidth,
				'height': offset.height || element.offsetHeight,
				'left': position.left + offset.left,
				'top': position.top + offset.top
			};
			obj.right = obj.left + obj.width;
			obj.bottom = obj.top + obj.height;
			return obj;
		},
		setTipPosition: function(element){
			var position = this.getElementPosition(element);
			
			this.elementPosition = position;

			var _winHeight = $(document.body).innerHeight();
			var _css = {
				bottom:  _winHeight - position.top + 3,
				left: position.left - this.options.width / 2 + position.width / 2
			};
			this.menu.css(_css);
		},
		disable: function(){
			window.clearTimeout(this.showTimer);
			this.hide();
			this.disabled = 1;
		},
		enable: function(){
			this.disabled = 0;
		}

	};

	return _this.init();
};